<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<view class="flex navBox">
			<view class="flex navItem" v-for="(nav,index) in tabStatus" :key="index" @click="tabsChange(index)">
				<view>{{nav.name}}</view>
				<view :class="index==statusType?'navBorder afterBorder':'navBorder'"></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="contonts" :style="{ height: Number(windowHeight-100) + 'px' }"
			v-if="lists.length>0" @scrolltolower="reachBottom">
			<view v-for="(item,index) in lists" :key='index' class="orderitem">
				<view class="flex orderStatus">
					<view style="flex-shrink: 0;">订单编号:{{item.orderNo}}</view>
					<view v-if="item.taskEnrollStatus=='CANCEL'" style="font-size: 24rpx;">已取消</view>
					<view v-else style="font-size: 24rpx;">{{item.taskEnrollStatus_dictText}}</view>
				</view>
				<view class="flex shopBox">
					<image :src="buildImgUrl(item.taskCover)" class="merchantLogo"></image>
					<view class="shopContent">
						<view class="doubleLine">{{item.shopId_dictText}}</view>
						<view class="flex fullBox">
							<image
								:src="item.taskPlatform==2?'../../static/index/mtLogo.png':'../../static/index/blueOrdering.png'"
								class="full"></image>
							<!-- <view>{{item.taskRule ||''}}</view> -->
						</view>
						<view class="applicationTime">申请时间:{{item.createTime}}</view>
					</view>
				</view>
				<view class="flex statusBtn"
					v-if="item.taskEnrollStatus=='UPLOADING'||item.taskEnrollStatus=='OBJECTION'">
					<view class="btn" v-if="item.taskEnrollStatus=='UPLOADING'" @click="closeApply(item.id,index)">取消申请
					</view>
					<view class="btn" v-if="item.taskEnrollStatus=='OBJECTION'" @click="toorderdetail(item.id)">重新提交
					</view>
					<view class="btn btnAfter" v-if="item.taskEnrollStatus=='UPLOADING'"
						@click="toorderdetail(item.id)">上传评价截图
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="kong" v-else>
			<image src="../../static/index/listNull.png" class="listNull"></image>
			<view class="zanwu">暂无订单</view>
		</view>
	</view>
</template>

<script>
	import {
		buildImgUrl
	} from "../../utils/me.js";
	import {
		taskEnrollList,
		cancelEnrolId
	} from "../../common/api.js"
	export default {
		data() {
			return {
				buildImgUrl,
				tabStatus: [{
					name: '全部订单',
					status: ''
				}, {
					name: '待上传',
					status: 'UPLOADING'
				}, {
					name: '审核中',
					status: 'JUDGE'
				}, {
					name: '已完成',
					status: 'FINISH'
				}, {
					name: '被驳回',
					status: 'OBJECTION'
				}],
				statusType: 0, // tabs组件的current值，表示当前活动的tab选项
				argument: {},
				lists: [],
				pageNo: 1,
				total: '',
				status: '4', //当前选择tabs
				windowHeight: 0,

			}
		},
		onReachBottom() {
			if (this.total <= this.lists.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.argument.pageNo++;
				this.getOrderList()
			}
		},
		onLoad(e) {
			this.argument.memberId = uni.getStorageSync('userInfo').id
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			})
		},
		onShow() {
			if (uni.getStorageSync('index') == 0) {
				this.statusType = 0
				this.argument.taskEnrollStatus = this.tabStatus[0].status
			}
			if (uni.getStorageSync('index') == 1) {
				this.statusType = 1
				this.argument.taskEnrollStatus = this.tabStatus[1].status
			}
			if (uni.getStorageSync('index') == 2) {
				this.statusType = 2
				this.argument.taskEnrollStatus = this.tabStatus[2].status
			}
			if (uni.getStorageSync('index') == 3) {
				this.statusType = 3
				this.argument.taskEnrollStatus = this.tabStatus[3].status
			}
			if (uni.getStorageSync('index') == 4) {
				this.statusType = 4
				this.argument.taskEnrollStatus = this.tabStatus[4].status
			}
			this.argument.pageNo = 1
			this.argument.memberId = uni.getStorageSync('userInfo').id
			// this.argument.taskEnrollStatus = this.tabStatus[0].status
			// this.statusType = 0

			this.getOrderList()
		},
		onReachBottom() {
			this.argument.pageNo++
			this.getOrderList()
		},
		methods: {
			reachBottom() {
				this.argument.pageNo++
				this.getOrderList()
			},
			closeApply(id, index) {
				uni.showModal({
					title: '提示',
					content: '确认取消该申请?',
					success: (res) => {
						if (res.confirm) {
							this.cancelEnrolId(id, index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancelEnrolId(id, index) {
				cancelEnrolId(id).then(res => {
					this.$toast(res.message)
					if (res.success) {
						this.lists.splice(index, 1)
					}
					uni.hideLoading()
				})
			},
			// 跳转订单详情
			toorderdetail(ordernum) {
				uni.navigateTo({
					url: '/pages/index/activityProcess?orderType=1&id=' + ordernum,
				})
			},
			//获取订单列表
			getOrderList() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				taskEnrollList(that.argument).then(res => {
					if (res.success) {
						this.lists = this.argument.pageNo == 1 ? res.result.records : this.lists.concat(res.result
							.records)
						this.total = res.result.total; //数据总条数
					}
					uni.hideLoading()
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				uni.setStorageSync('index', index);
				this.statusType = index
				this.argument.pageNo = 1
				this.argument.taskEnrollStatus = this.tabStatus[index].status
				this.getOrderList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.doubleLine {
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.listNull {
		width: 170rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.kong {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx;

	}

	.container {
		width: 100%;
		background: #F7F7F7;
		display: flex;
		flex-direction: column;

		.navBorder {
			width: 72.53rpx;
			height: 10.53rpx;
			border-radius: 358rpx;
			opacity: 1;
			background: #fff;
		}

		.afterBorder {
			background: #FFC114;
		}

		.navItem {
			flex-direction: column;
			align-items: center;
		}

		.navBox {
			font-size: 28rpx;
			color: #333333;
			justify-content: space-around;
			width: 100%;
			height: 100rpx;
			align-items: center;
			background: #fff;
		}

		.contonts {
			width: 100%;
			flex: 1;
			overflow-y: scroll;

			/* 订单列表 */
			.orderitem {
				width: 722rpx;
				height: auto;
				border-radius: 44rpx;
				opacity: 1;
				background: #FFFFFF;
				margin: 30rpx 10rpx;

				.orderStatus {
					height: 73rpx;
					border-bottom: 2rpx solid #F1F1F1;
					font-size: 28rpx;
					color: #333333;
					padding: 0 20rpx;
					justify-content: space-between;
					align-items: center;
				}

				.shopBox {
					min-height: 235rpx;
					height: auto;
					padding: 15rpx 38rpx 0;
					border-bottom: 2rpx solid #F1F1F1;

					.merchantLogo {
						width: 186rpx;
						height: 186rpx;
						flex-shrink: 0;
						margin-right: 32rpx;
					}

					.shopContent {
						padding-top: 8rpx;
						font-size: 32rpx;
						color: #333333;

						.fullBox {
							font-size: 28rpx;
							color: #333333;
							margin: 15rpx 0 38rpx;

							.full {
								width: 44rpx;
								height: 44rpx;
								border-radius: 28rpx;
								margin-right: 18rpx;
							}
						}

						.applicationTime {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}

				.statusBtn {
					justify-content: flex-end;
					padding: 0 26rpx;
					align-items: center;
					height: 93rpx;

					.btn {
						border-radius: 36rpx;
						opacity: 1;
						border: 2rpx solid rgba(51, 51, 51, 0.6);
						padding: 10rpx 20rpx;
						font-size: 28rpx;
						color: rgba(51, 51, 51, 0.6);
						margin-left: 22rpx;
					}

					.btnAfter {
						background: #FFC114;
						border: 2rpx solid #FFC114;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>